<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="btn">失恋</button>
    </div>
    <script>
        // 二十三种设计模式。（四种 -- js）
        // Girl 失恋（事件）  shopping cry eat
        function Girl() {
            this._events = {}
        }

        // 订阅事件
        Girl.prototype.on = function(eventName, fn) {
            if(!this._events[eventName]) {
                //  this._events.shilian = [fn]
                this._events[eventName] = [fn]
            }else {
                // this._events.shilian.push(fn)
                this._events[eventName].push(fn)
            }
        }

        Girl.prototype.emit = function(eventName) {
            if(this._events[eventName]) {
                this._events[eventName].forEach((fn)=> {
                    fn()
                })
            }
        }



        var g1 = new Girl()

        // 订阅事件
        g1.on("shilian", function() {
            console.log("shopping")
        })

        g1.on("shilian", function() {
            console.log("cry")
        })

        g1.on("shilian", function() {
            console.log("eat")
        })

        btn.onclick = function() {
            // 一旦发布shilian事件，就会自动执行三个事件处理函数
            g1.emit("shilian")
        }
        
    </script>
</body>
</html>